<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>错误详情</title>
    <link href="/static/layui/css/layui.css" rel="stylesheet">
    <link href="/static/css/detail.css" rel="stylesheet">
</head>
<body>

<div class="layui-row">
    <div class="layui-col-md6 detail-render">
        <h1 style="text-align: center; margin-top: 10px" id="render-title">
        </h1>
        <div class="content-render" id="render-content">
        </div>
    </div>
    <div class="layui-col-md6 detail-checker" id="render-checker">

    </div>
</div>


{% raw %}
<script type="text/html" id="detail-item-template">
    <div class="layui-card detail-item" data-id="{{= d.index }}">
        <div class="layui-card-header">
            <span style="font-size: 15px;font-weight: 600;">{{= d.error_type }}</span>
            <span style="font-size: 12px;padding: 5px;color: gray;">ID: {{ d.index }}</span>
        </div>
        <div class="layui-card-body">
            <p><strong>原句：</strong><span class="highlight">{{= d.origin }}</span></p>
            <p><strong>审计：</strong>{{= d.review }}</p>
        </div>
    </div>
</script>
{% endraw %}

<script src="/static/layui/layui.js"></script>
<script>

    var render_info = {
        title: "To the Moon",
        article: "For everyone, everything. Goodbye, Aliya.",
        mistake: []
    };

    function render() {
        layui.use(function () {
            var $ = layui.$;
            var laytpl = layui.laytpl;

            if (render_info.title) {
                $('#render-title').text(render_info.title);
            } else {
                $('#render-title').text("Untitled");
            }


            if (render_info.article_html) {
                $('#render-content').html(render_info.article_html);
            } else if (render_info.article) {
                let paragraphs = render_info.article.split('\n');
                let wrappedParagraphs = paragraphs.map(function (paragraph) {
                    return '<p>' + paragraph + '</p>';
                });
                let htmlContent = wrappedParagraphs.join('');
                $('#render-content').html(htmlContent);
            } else {
                $('#render-content').html('<p>-</p>');
            }

            $('#render-checker').html('');

            let promises = [];

            layui.each(render_info.mistake, function (index, item) {
                let promise = new Promise((resolve) => {
                    item.index = index;
                    laytpl($('#detail-item-template').html()).render(item, function (str) {
                        resolve(str);
                    });
                });
                promises.push(promise);
            });

            Promise.all(promises).then((results) => {
                let checkers = results.join('');
                $('#render-checker').html(checkers);
            });


        })
    }

    render();

    layui.use(function () {
        var $ = layui.$;

        $(document).on('mouseenter', '.detail-item', function () {
            let dataId = $(this).attr('data-id');
            let error_detail = render_info.mistake[dataId];
            let origin = error_detail.origin; // 需要高亮的句子

            highlightSentence(origin);
        }).on('mouseleave', '.detail-item', function () {
            removeHighlight();
        });

        function highlightSentence(origin) {
            $("#render-content p").each(function () {
                let paragraph = $(this);
                let html = paragraph.html();

                // 转义正则特殊字符
                let escapedOrigin = origin.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
                let regex = new RegExp(`(${escapedOrigin})`, 'g');

                // 插入带有 .highlight 类的 span，但暂时不激活动画
                let highlightedHTML = html.replace(regex, '<span class="highlight-none">$1</span>');
                paragraph.html(highlightedHTML);

                // 动态添加激活类以触发动画
                paragraph.find('.highlight-none').each(function () {
                    // 使用 setTimeout 确保浏览器应用初始状态
                    setTimeout(() => {
                        $(this).addClass('highlight'); // 添加激活类
                    }, 10);
                });
            });
        }

        function removeHighlight() {
            $("#render-content p").html(function (_, html) {
                return html.replace(/<span class="highlight-none highlight">([\s\S]*?)<\/span>/g, '$1');
            });
        }

    })
</script>
</body>

</html>